import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
    {
        // 因为被嵌套的<router-view>是在HomeView中的
        // 所以将在此处理配置嵌套路由
        // 使用children来配置子级路由，children子级的配置方式与routes子级的配置方式相同
        // 通常，应该配置redirect属性，表示重定向，因为一旦发现嵌套，原来的视图（例如HomeView）是不完整的，不应该允许直接访问
        // 以下配置重定向的效果：一旦访问 / 路径，就会自动跳转到 /user/list 路径
        path: '/admin',
        component: HomeView,
        redirect: '/admin/administrator/list',
        children: [
            {
                path: 'user/list', // 不以 / 作为第1个字符的路径，将与父级路径拼接（不需要关注中间的 / 分隔符）
                component: () => import('../views/user/UserListView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 用户列表'
                }
            },
            {
                path: 'user/add-new',
                component: () => import('../views/user/UserAddNewView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 添加用户'
                }
            },
            {
                path: 'brand/list', // /admin/brand/list
                component: () => import('../views/brand/BrandListView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 品牌列表'
                }
            },
            {
                path: 'brand/add-new', // /admin/brand/add-new
                component: () => import('../views/brand/BrandAddNewView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 添加品牌'
                }
            },
            {
                path: 'category/list', // /admin/category/list
                component: () => import('../views/category/CategoryListView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 类别列表'
                }
            },
            {
                path: 'category/add-new', // /admin/category/add-new
                component: () => import('../views/category/CategoryAddNewView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 添加类别'
                }
            },
            {
                path: 'administrator/list', // /admin/administrator/list
                component: () => import('../views/admin/AdminListView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 管理员列表'
                }
            },
            {
                path: 'administrator/add-new', // /admin/administrator/add-new
                component: () => import('../views/admin/AdminAddNewView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 添加管理员'
                }
            },
            {
                path: 'attribute/list', // /admin/attribute/list
                component: () => import('../views/attribute/AttributeListView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 属性列表'
                }
            },
            {
                path: 'attribute/add-new', // /admin/attribute/add-new
                component: () => import('../views/attribute/AttributeAddNewView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 添加属性'
                }
            },
            {
                path: 'attribute-template/list', // /admin/attribute-template/list
                component: () => import('../views/attribute-template/AttributeTemplateListView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 属性模板列表'
                }
            },
            {
                path: 'attribute-template/add-new', // /admin/attribute-template/add-new
                component: () => import('../views/attribute-template/AttributeTemplateAddNewView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 添加属性模板'
                }
            },
            {
                path: 'album/list', // /admin/album/list
                component: () => import('../views/album/AlbumListView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 相册列表'
                }
            },
            {
                path: 'album/add-new', // /admin/album/add-new
                component: () => import('../views/album/AlbumAddNewView.vue'),
                meta: {
                    title: '酷鲨商城运营管理平台 -- 添加相册'
                }
            }
        ]
    },
    {
        path: '/',
        component: () => import('../views/LoginView.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next();
})

export default router
